<template>
  <div>
    <el-descriptions class="margin-top" title="" :column="4" size="medium" border v-for="(item, index) in userList" :key="index">
      <el-descriptions-item>
        <template slot="label">
          S/N：
        </template>
        {{ item.userId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          子帳戶：
        </template>
        {{ item.userAccount }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          操作權限：
        </template>
        <span :class="[ item.userType == '0' ? 'blue-font' : '']">
          {{ item.userType == '0' ? '應用員' : '檢視員' }}
        </span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          所屬群組：
        </template>
        {{ item.groupName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          操作：
        </template>
        <el-button type="success" @click="onChangeUser(item.userAccount, item.userType)" size="small">重設密碼</el-button>
        <el-button type="info" v-if="item.userType == '1'" @click="onChangeUserType(item.userId, item.groupName)" size="small">設定為應用員</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <el-drawer
      title="修改子帳號密碼"
      :visible.sync="drawer"
      direction="btt"
      :wrapperClosable="false"
      ref="drawer"
      >
      <el-row :gutter="10" justify="end" type="flex" class="text-right">
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
        </el-col>  
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input placeholder="請輸入子帳號" v-model="changeForm.account" disabled>
            <template slot="prepend">帳號</template>
          </el-input>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <el-input placeholder="請輸入密碼" type="password" v-model="changeForm.password">
            <template slot="prepend">密碼</template>
          </el-input>
        </el-col>
        <el-col :xs="6" :sm="6" :md="3" :lg="3" :xl="3">
          <el-button type="primary" @click="onChangeSubmit">確定</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'user-list',

  props: ['groupId'],

  data() {
    return {
      userList: [],
      changeForm: {
        account: '',
        password: '',
        type: ''
      },
      loading: false,
      drawer: false,
    }
  },

  mounted() {
    this.getData()
  },

  methods: {
    //获取子账号列表
    getData() {
      this.loading = true
      this.$store.dispatch('account/fetchChildList', { groupId: this.groupId }).then(res => {
        // console.log('获取子账号列表')
        // console.log(res)
        this.userList = res.result.gpsUserList
        this.loading = false
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    },

    //修改子账户密码
    onChangeUser(account, userType) {
      this.drawer = true
      this.changeForm.account = account
      this.changeForm.type = userType == '0' ? '2' : '3'
    },

    //修改密码提交
    onChangeSubmit() {
      this.$confirm('此操作將修改帳號：' + this.changeForm.account + '的密碼, 是否繼續?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        this.$store.dispatch('common/fetchUpdatePwd', this.changeForm).then(res => {
          // console.log('子账号修改密码返回值')
          // console.log(res)
          this.loading = false
          this.$message.success(res.message)
          this.changeForm = {
            ...this.changeForm,
            password: '',
            type: ''
          }
          //关闭抽屉
          this.drawer = false
        }).catch(err => {
          this.loading = false
          this.$message.error(err)
          return false
        })
      }).catch(() => {
        //取消动作
      })
    },

    //修改用户类型
    onChangeUserType(id, name) {
      this.loading = true
      this.$store.dispatch('account/fetchUpdateAccountType', { userId: id, groupId: this.groupId }).then(res => {
        // console.log('修改用户类型返回值')
        // console.log(res)
        this.loading = false
        this.$message.success(res.message)
        this.getData()
      }).catch(err => {
        this.loading = false
        this.$message.error(err)
        return false
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/them.scss";

.green {
  color: $connectColor;
}

.red {
  color: $disconnectColor;
}

/deep/ .el-descriptions {
  margin-bottom: 10px !important;

  .is-bordered {
    table-layout: fixed !important;
  }

  .el-descriptions-item__cell {
    word-break: break-all;
  }
}

.blue-font {
  color: $baseColor;
  font-weight: bolder;
}
</style>
